<template>
  <div>
    <div v-if="!data || data.length === 0 || loading" class="text-color-secondary">
      {{ loading ? "加载中..." : "暂无岗位数据，请选择或更换部门" }}
    </div>
    <a-radio-group v-else :value="value" class="position-grp" @change="change">
      <a-radio v-for="item in data" :key="item.positionId" :value="item.positionId">
        <span class="text-color-main align-middle mr-1">{{ item.positionName }}</span>
        <span v-if="item.description" class="text-color-secondary text-xs align-middle">({{ item.description }})</span>
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script setup lang="ts">
import type { PositionItem } from "/@/api/aiot/organization/models";

defineProps<{
  data?: PositionItem[];
  value: string;
  loading?: boolean;
}>();

const emits = defineEmits(["change"]);

function change(e) {
  emits("change", e);
}
</script>
<style lang="less">
.position-grp {
  .ant-radio-wrapper {
    align-items: center;
  }
  .ant-radio {
    top: 0;
  }
}
</style>
